<script lang="ts" setup>
import { listStatistics } from "@/api/monitor/loginInfo";
import * as echarts from "echarts";
import { EChartsOption } from "echarts";

const chartData = ref();
const chart = ref();
// const myChart = ref();
const loading = ref(true);
let myChart: any;
const getList = async () => {
  // 如果存在已初始化的图表实例，则先销毁
  if (myChart) {
    myChart.dispose(); // 销毁当前的图表实例
  }
  loading.value = true;
  const res = await listStatistics(null);
  loading.value = false;
  chartData.value = res.data.map((item: any) => {
    return {
      name: item.date,
      value: item.count
    };
  });

  let infoEl = chart.value;
  myChart = echarts.init(infoEl);
  // myChart.value = echarts.init(chart.value); // 重新初始化图表实例

  let option: EChartsOption;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(106,121,133,0.42)"
        }
      }

    },
    legend: {
      data: ["访问量"]
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    title: {},
    grid: {
      left: "2%",
      right: "2%",
      top: "10%",
      bottom: "0%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: chartData.value.map((item: any) => item.name)
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "访问量",
        type: "line",
        smooth: true,
        stack: "Total",
        // symbolSize: 8,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
            {
              offset: 0,
              // color: 'rgba(58,77,233,0.8)'
              color: "rgba(170, 201 ,234,0.8)"
            },
            {
              offset: 1,
              // color: 'rgba(58,77,233,0)'
              color: "rgba(170, 201 ,234,0)"
            },
            {
              offset: 0,
              color: "rgba(170, 201 ,234,1)"
              // color: 'rgba(58,77,233,0.9)'
            }
          ])
        },
        itemStyle: {
          // color: "#3D5DF4",
          color: "#4EA6FE"
        },
        lineStyle: {
          // 线条加阴影
          // 设置阴影颜色
          // shadowColor: "#3D5DF4",
          shadowColor: "#4EA6FE",
          shadowOffsetX: 0,
          // 设置阴影沿y轴偏移量为9
          shadowOffsetY: 9,
          // 设置阴影的模糊大小
          shadowBlur: 10,
          // 设置线条渐变色
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#94C2FD00" },
            // { offset: 0.2, color: "#3D5DF4" },
            { offset: 0.2, color: "#4EA6FE" },
            { offset: 0.1, color: "#5B8FF900" }
          ])
        },
        data: chartData.value
      }
    ]
  };

  myChart.resize(); // 调整图表大小
  option && myChart.setOption(option); // 设置图表选项
};

/* 刷新 */
const refresh = async () => {
  await getList(); // 调用获取数据的方法
};

onMounted(async () => {
  await getList(); // 初始化时获取数据
});
</script>

<template>

  <a-card hoverable>
    <template #title>
      <a-flex align="center" justify="space-between">
        <div class="card-title">访问量概览</div>
        <a-flex gap="small">
          <el-tooltip content="点击刷新" placement="top">
            <el-button :loading="loading" circle icon="refresh" plain type="primary" @click="refresh()"></el-button>
          </el-tooltip>
        </a-flex>
      </a-flex>
    </template>
    <a-spin :spinning="loading" size="large">
      <div ref="chart" style="height: 300px"></div>
    </a-spin>
  </a-card>

</template>

<style lang="scss" scoped>

</style>
